<template>
  <div>
    <el-container class="home-container">
      <el-header>
        <el-carousel arrow="always">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 class="medium"></h3>
          </el-carousel-item>
        </el-carousel>
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input placeholder="请输入商品类型进行查询" v-model="queryItemInfo.query" clearable @clear="getItemList">
                <el-button slot="append" icon="el-icon-search" @click="getItemList"></el-button>
              </el-input>
            </el-col>
            
			
          </el-row>
          <el-table :data="itemList" style="width: 100%" stripe border  >

            <el-table-column prop="images" label="商品图片" width="300px"  >
              <template slot-scope="scope">
                <img :src="scope.row.images" alt="" width="60px" />
              </template>
            </el-table-column>
						
						<!-- <el-table-column prop="images" label="商品图片" width="260px">
						  <template slot-scope="scope">
						    <el-button type="primary"  size="mini" @click="imagesShow(scope.row.images)">图片预览</el-button>
						  </template>
						</el-table-column> -->
						
            <el-table-column prop="itemNum" label="商品号" width="100px">
            </el-table-column>
            <el-table-column prop="itemType" label="商品类型" width="250px">
            </el-table-column>

            <el-table-column prop="price" label="价格(元)" width="150px">
              <template slot-scope="scope">
                {{scope.row.price | priceFormat}}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="250px">
              <template slot-scope="scope">
                <el-button size="small" disabled :type="scope.row.status ? 'dinger' : 'primary'">
                  {{scope.row.status ? '已点餐':'未点餐' }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作">
				
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-edit" size="mini" :disabled="scope.row.status == 1"
                  @click="addBillBtn(scope.row)">下单</el-button> &nbsp;
				 
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryItemInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryItemInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
		  
		  
		 
        </el-card>
      </el-header>
    </el-container>

    <el-dialog title="添加用户信息" :visible.sync="addBillDialogVisible" width="50%" @close="quxiao">
      <!-- 定义分类表单 -->
      <el-form :model="addBillForm" :rules="rules" ref="addBillForm" label-width="100px">
        <el-form-item label="真实姓名:" prop="userRealname" >
          <el-input v-model="addBillForm.userRealname" disabled></el-input>
        </el-form-item>
        <el-form-item label="电话:" prop="userPhone">
          <el-input v-model="addBillForm.userPhone" disabled></el-input>
        </el-form-item>
        <el-form-item label="身份证号:" prop="userIdNum">
          <el-input v-model="addBillForm.userIdNum" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addBillDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBill">确认</el-button>
      </span>
    </el-dialog>
	
	<!-- <el-dialog title="图片预览" :visible.sync="dialogImageVisible">
	  <img :src="imageUrlPath" width="100%" height="100%" />
	</el-dialog> -->
	
  </div>
</template>

<script>
  export default {
    data() {
      return {
        addBillDialogVisible: false,
        addBillForm: {
          userId: '',
          userRealname: '',
          userPhone: '',
          userIdNum: '',
          itemId: ''
        },
        user: {
          id: '',
          phone: '',
          realname: '',
          idNum: ''
        },
        floor: [],
        props: {
          expandTrigger: 'hover',
          value: "id",
          label: "floor",
        },
        total: 0,
        queryItemInfo: {
          query: '', //定义查询参数
          pageNum: 1,
          pageSize: 10
        },
        itemList: [],
		// imageUrlPath: "",
		// dialogImageVisible: false,
      }
    },
    methods: {
     
      async getItemList() {
        const {
          data: result
        } = await this.$http.get("/item/getItemList", {
          params: this.queryItemInfo
        })
        if (result.status !== 200) return this.$message.error("商品列表查询失败")
        this.itemList = result.data.rows
        this.total = result.data.total
      },
      formatDate(row, column, cellValue, index) {
        let date = new Date(cellValue)
        let year = date.getFullYear()
        let month = (date.getMonth() + 1 + '').padStart(2, '0')
        let day = (date.getDate() + '').padStart(2, '0')
        let HH = (date.getHours() + '').padStart(2, '0')
        let MM = (date.getMinutes() + '').padStart(2, '0')
        let SS = (date.getSeconds() + '').padStart(2, '0')
        return year + '-' + month + '-' + day + ' ' + HH + ":" + MM + ":" + SS
      },
      handleSizeChange(size) {
        this.queryItemInfo.pageSize = size
        this.getItemList()
      },
      handleCurrentChange(current) {
        this.queryItemInfo.pageNum = current
        this.getItemList()
      },
      handlePreview(file) {
        this.imageUrlPath = file.response.data.urlPath
        this.dialogImageVisible = true
      },
			

		// imagesShow(images){
		// 		this.dialogImageVisible=true
		// 		this.imageUrlPath = images
		// 	  },
		// handlePreview(file) {
		//   //获取图片的虚拟路径
		//   this.imageUrlPath = file.response.data.urlPath
		//   this.dialogImageVisible = true
		// },	  
	
      quxiao() {
        this.addBillDialogVisible = false,
          this.$refs.addBillForm.resetFields()

      },
      addBillBtn(item) {
        this.addBillDialogVisible = true
        this.addBillForm.itemId = item.id
        this.addBillForm.userId = this.user.id
        this.addBillForm.userRealname = this.user.realname
        this.addBillForm.userPhone = this.user.phone
        this.addBillForm.userIdNum = this.user.idNum

      },
      async addBill() {
        const {
          data: result
        } = await this.$http.post("/bill/addBill", this.addBillForm)

        if (result.status !== 200) return this.$message.error("点餐失败")
        this.$message.success("点餐成功")
        this.addBillDialogVisible = false
        this.getItemList()
      },
      async getUser(){
        const {
          data: result
        } = await this.$http.get("/user/one/"+this.user.id)
        if (result.status !== 200) return this.$message.error("用户信息获取失败")
        this.user = result.data
      }
    },
    mounted() {
      this.user.id = window.sessionStorage.getItem('id');
      this.getUser()
      this.getItemList()
    }
  }
</script>

<style lang="less" scoped>
  .el-carousel__item h3 {
	  
    width: 100%;
  }

  .el-carousel__item:nth-child(3) {
    background: url(../../assets/images/1.jpg);
	background-repeat: no-repeat;
	background-size:100% 100%; 
	background-attachment: fixed;
	
  }
  

  .el-carousel__item:nth-child(4) {
    background: url(../../assets/images/2.jpg);
	background-repeat: no-repeat;
	background-size:100% 100%; 
	background-attachment: fixed;
  }

  .el-carousel__item:nth-child(5) {
    background: url(../../assets/images/3.jpg);
	background-repeat: no-repeat;
	background-size:100% 100%; 
	background-attachment: fixed;
  }

  .el-carousel__item:nth-child(6) {
    background: url(../../assets/images/4.jpg);
	background-repeat: no-repeat;
	background-size:100% 100%; 
	background-attachment: fixed;
  }
</style>
